<template>
  <div class="project-management">
    <div class="header">
      <h2>专项项目管理</h2>
    </div>

    <!-- 项目列表 -->
    <div class="project-list">
      <!-- 表头 -->
      <div class="project-row header-row">
        <div class="project-cell">项目名称</div>
        <div class="project-cell">目标</div>
        <div class="project-cell">专项主责</div>
        <div class="project-cell">状态</div>
        <div class="project-cell">优先级</div>
        <div class="project-cell">结项时间</div>
        <div class="project-cell">倒计时(天)</div>
      </div>

      <!-- 项目1 -->
      <div class="project-row" v-for="(project, index) in projects" :key="index">
        <div class="project-cell">{{ project.name }}</div>
        <div class="project-cell">{{ project.target }}</div>
        <div class="project-cell">{{ project.principal }}</div>
        <div class="project-cell">
          <span class="status-tag" :class="getStatusClass(project.status)">
            {{ project.status || '未开始' }}
          </span>
        </div>
        <div class="project-cell">
          <span class="priority-tag" :class="getPriorityClass(project.priority)">
            {{ project.priority }}
          </span>
        </div>
        <div class="project-cell">{{ project.endTime }}</div>
        <div class="project-cell">{{ project.countdown }}</div>
      </div>
    </div>

    <!-- 项目详情 -->
    <div class="project-details" v-if="selectedProject">
      <div class="details-header">
        <h3>{{ selectedProject.name }} - 项目详情</h3>
      </div>

      <div class="details-content">
        <div class="details-row">
          <div class="details-label">项目名称:</div>
          <div class="details-value">{{ selectedProject.name }}</div>
        </div>
        <div class="details-row">
          <div class="details-label">目标:</div>
          <div class="details-value">{{ selectedProject.target }}</div>
        </div>
        <div class="details-row">
          <div class="details-label">专项主责:</div>
          <div class="details-value">{{ selectedProject.principal }}</div>
        </div>
        <div class="details-row">
          <div class="details-label">状态:</div>
          <div class="details-value">
            <span class="status-tag" :class="getStatusClass(selectedProject.status)">
              {{ selectedProject.status || '未开始' }}
            </span>
          </div>
        </div>
        <div class="details-row">
          <div class="details-label">优先级:</div>
          <div class="details-value">
            <span class="priority-tag" :class="getPriorityClass(selectedProject.priority)">
              {{ selectedProject.priority }}
            </span>
          </div>
        </div>
        <div class="details-row">
          <div class="details-label">结项时间:</div>
          <div class="details-value">{{ selectedProject.endTime }}</div>
        </div>
        <div class="details-row">
          <div class="details-label">倒计时:</div>
          <div class="details-value">{{ selectedProject.countdown }}天</div>
        </div>

        <!-- 进度信息 -->
        <div class="progress-section">
          <div class="progress-tabs">
            <div
                class="progress-tab"
                :class="{ active: activeTab === 'previous' }"
                @click="activeTab = 'previous'">
              往期进度
            </div>
            <div
                class="progress-tab"
                :class="{ active: activeTab === 'current' }"
                @click="activeTab = 'current'">
              本期进度
            </div>
            <div
                class="progress-tab"
                :class="{ active: activeTab === 'next' }"
                @click="activeTab = 'next'">
              下期计划
            </div>
          </div>

          <div class="progress-content">
            <div v-if="activeTab === 'previous'" class="progress-text">
              {{ selectedProject.previousProgress || '暂无往期进度信息' }}
            </div>
            <div v-if="activeTab === 'current'" class="progress-text">
              {{ selectedProject.currentProgress || '暂无本期进度信息' }}
            </div>
            <div v-if="activeTab === 'next'" class="progress-text">
              {{ selectedProject.nextPlan || '暂无下期计划信息' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projects: [
        {
          id: 1,
          name: '改善专项',
          target: '100',
          principal: '张1',
          status: '进行中',
          priority: '高',
          endTime: '2025-12-21 00:00:00',
          countdown: '156',
          previousProgress: '已完成第一阶段工作',
          currentProgress: '正在进行第二阶段开发',
          nextPlan: '计划第三季度完成测试'
        },
        {
          id: 2,
          name: '改善专项1',
          target: '',
          principal: '',
          status: '',
          priority: '高',
          endTime: '2025-12-21 00:00:00',
          countdown: '156',
          previousProgress: '',
          currentProgress: '',
          nextPlan: ''
        }
      ],
      selectedProject: null,
      activeTab: 'previous'
    }
  },
  methods: {
    getStatusClass(status) {
      switch(status) {
        case '进行中': return 'status-processing';
        case '已完成': return 'status-completed';
        case '已延期': return 'status-delayed';
        default: return 'status-default';
      }
    },
    getPriorityClass(priority) {
      switch(priority) {
        case '高': return 'priority-high';
        case '中': return 'priority-medium';
        case '低': return 'priority-low';
        default: return 'priority-default';
      }
    }
  },
  mounted() {
    // 默认选择第一个项目
    if (this.projects.length > 0) {
      this.selectedProject = this.projects[0];
    }
  }
}
</script>

<style scoped>
.project-management {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  color: #333;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h2 {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 500;
}

/* 项目列表样式 */
.project-list {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.project-row {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
}

.project-row:last-child {
  border-bottom: none;
}

.header-row {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #909399;
}

.project-cell {
  flex: 1;
  padding: 12px 15px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row:not(.header-row):hover {
  background-color: #f5f7fa;
  cursor: pointer;
}

/* 状态标签样式 */
.status-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status-processing {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-delayed {
  background-color: #fff2e8;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.status-default {
  background-color: #fafafa;
  color: #8c8c8c;
  border: 1px solid #d9d9d9;
}

/* 优先级标签样式 */
.priority-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.priority-high {
  background-color: #fff1f0;
  color: #f5222d;
  border: 1px solid #ffa39e;
}

.priority-medium {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.priority-low {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.priority-default {
  background-color: #fafafa;
  color: #8c8c8c;
  border: 1px solid #d9d9d9;
}

/* 项目详情样式 */
.project-details {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.details-header {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.details-header h3 {
  color: #2c3e50;
  font-size: 18px;
  font-weight: 500;
}

.details-content {
  display: flex;
  flex-wrap: wrap;
}

.details-row {
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.details-label {
  width: 100px;
  font-weight: bold;
  color: #606266;
}

.details-value {
  flex: 1;
  color: #303133;
}

/* 进度信息样式 */
.progress-section {
  width: 100%;
  margin-top: 20px;
}

.progress-tabs {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 15px;
}

.progress-tab {
  padding: 10px 20px;
  cursor: pointer;
  color: #606266;
  border-bottom: 2px solid transparent;
  margin-right: 10px;
}

.progress-tab:hover {
  color: #409eff;
}

.progress-tab.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  font-weight: bold;
}

.progress-content {
  min-height: 100px;
  padding: 10px;
  background-color: #fafafa;
  border-radius: 4px;
}

.progress-text {
  white-space: pre-wrap;
  line-height: 1.6;
}
</style>